<template>
    <div>
        <div class="header">
            <van-icon name="scan" color="#1989fa" />

            <div>商品列表</div>

            <el-button type="text">首页</el-button>
        </div>

<!-- goodsDetail -->

<!-- goodsInfoDetail -->

        <van-tabs v-model="tabTitle" @click="tabClick">
            <van-tab
                v-for="(item, index) in tabList"
                :key="index"
                :title="item.name">

                <h3 style="text-align:center">{{item.name}}</h3>
                <h5 style="text-align:center">{{item.desc}}</h5>

                <div class="goods-info" v-for="(item, index) in goodsList" @click="toInfoDetail(item)" :key="index">
                    <img :src="item.picUrl" alt="">

                    <div class="detail-info">
                        <div>{{item.name}}</div>
                        <div style="color:#aaa;">{{item.brief}}</div>
                        <div>
                            <span style="color: red;">￥{{item.retailPrice}}</span>
                            &nbsp;
                            <span style="color: #aaa;font-size:12px;text-decoration: line-through;">￥{{item.counterPrice}}</span>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>


<script>
import request from '../fetch/index.js'
    export default {
        data () {
            return {
                id: '',
                tabTitle: '',
                tabList: [
                    {id: 1, name: '美的空调'},
                    {id: 2, name: '美的冰箱'}
                ],
                formData: {},
                allList: [
                    {
                        addTime: "2021-11-29T08:52:01",
                        deleted: false,
                        desc: "美的冰箱简介",
                        iconUrl: "http://192.168.200.251:8888/wx/storage/fetch/5jea9wm2rs1zr2osykpx.png",
                        id: 1,
                        keywords: "美的冰箱关键字",
                        level: "L2",
                        name: "美的冰箱",
                        picUrl: "http://192.168.200.251:8888/wx/storage/fetch/qooksavl5g5zqqmrv6oh.png",
                        pid: 88,
                        sortOrder: 50,
                        updateTime: "2021-11-29T08:52:01",
                    },
                    {
                        addTime: "2021-11-29T08:50:00",
                        deleted: false,
                        desc: "家电系列简介",
                        iconUrl: "http://192.168.200.251:8888/wx/storage/fetch/cbhmezw4ebbzvmj6cijb.png",
                        id: 2,
                        keywords: "家电系列关键字",
                        level: "L1",
                        name: "家电系列",
                        picUrl: "http://192.168.200.251:8888/wx/storage/fetch/hms8ihzogo0r21i7t41q.png",
                        pid: 0,
                        sortOrder: 50,
                        updateTime: "2021-11-29T08:50:00",
                    }
                ],
                goodsList: []
            }
        },
        // 生命周期函数-----dom元素挂载完毕以后触发
        mounted () {
            this.id = this.$route.query.categoryId
            // this.formData = this.allList[0]
            this.getData()
            this.getCategory()
        },
        methods: {
            getCategory () {
                request({
                    url: 'http://192.168.200.251:8888/wx/goods/category',
                    method: 'get',
                    params: {
                        id: this.id,
                        page: 1,
                        limit: 10
                    }
                }).then(res => {
                    console.log('获取分类u', res)
                    this.tabList = res.data.data.brotherCategory
                    // this.asideList = res.data.data.categoryList
                    // this.goodsList = res.data.data.currentSubCategory
                })
            },
            toInfoDetail (item) {
                console.log(item)

                this.$router.push({
                    path: '/goodsInfoDetail',
                    query: {
                        ...item
                    }
                })
            },
            getData () {
                request({
                    url: 'http://192.168.200.251:8888/wx/goods/list',
                    method: 'get',
                    params: {
                        categoryId: this.id,
                        page: 1,
                        limit: 10
                    }
                }).then(res => {
                    this.goodsList = res.data.data.list
                })
            },
            tabClick (index) {
                this.id = this.tabList[index].id

                this.getData()
                this.getCategory()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .goods-info {
        display: flex;
        justify-content: flex-start;
        height: 100px;
        font-size: 14px;

        img {
            width: 100px;
            height: 100px;
        }

        .detail-info {
            padding-left: 10px;
            box-sizing: border-box;
        }
    }

</style>